<template>
  <div class="app-container">
    <el-drawer :wrapperClosable="false" :close-on-press-escape="false" :title="title" @closed="operateClose" :visible.sync="open" size="65%" append-to-body >
      <el-form v-loading = "loading" ref="form" :model="form" :disabled="true" :rules="rules" label-width="120px" class="form">
        <el-row v-if="type === 1 || user.deptId < 101">
          <el-col :span="8">
            <el-form-item label="代理" prop="agentIds">
              <el-select filterable remote  reserve-keyword :remote-method="agentRemoteMethod" :loading="agentLoading" v-model="form.agentIds" placeholder="请输入代理账号或昵称" clearable style="width: 240px" >
                <el-option v-for="item in agentList" :key="item.id" :label="item.nickName+'('+item.userName+')'" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="代理商户名称" prop="shortName">
              <name-input v-model="form.shortName" :maxlength="20" placeholder="请输入代理商户名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="type === 2">
          <el-col :span="8">
            <el-form-item label="店铺账户" prop="shopId">
              <el-select @change="$forceUpdate()" filterable v-model="form.shopId" placeholder="请选择店铺账户" clearable style="width: 240px" >
                <el-option v-for="item in shopList" :key="item.id" :label="item.nickName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="费率" prop="feeRate">
              <el-input-number :step="0.1" :min="0" :precision="2" v-model="form.feeRate" placeholder="请输入费率" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="二级商户号" prop="subMerchantNo">
              <el-input v-model="form.subMerchantNo" :maxlength="80" placeholder="请输入二级商户号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择状态" clearable>
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7" v-if="form.status === 3">
            <el-form-item label="驳回原因"  prop="fail">
              <el-input v-model="form.fail" placeholder="请输入驳回原因" />
            </el-form-item>
          </el-col>

        </el-row>


        <el-divider content-position="left">资质信息</el-divider>

        <el-form-item label="商户类型" prop="signType">
          <el-select v-model="form.signType" placeholder="请选择商户类型" clearable style="width: 240px" >
            <el-option label="企业" value="ENTERPRISE"/>
            <el-option label="个体户" value="INDIVIDUAL"/>
          </el-select>
        </el-form-item>

        <el-row>
          <el-col :span="8">
            <el-form-item label="营业执照" prop="licenceImg">
              <YeePayFileUpload @input="handUploadImg" keys="licenceUrl" :path="form.licenceUrl" :file-size="4"  :limit="1" v-model="form.licenceImg"></YeePayFileUpload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="公司全称" prop="signName">
              <name-input v-model="form.signName" :maxlength="80" placeholder="请输入营业执照全称" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="社会统一信用代码" prop="licenceNo" label-width="140px">
              <el-input v-model="form.licenceNo" :maxlength="20" placeholder="请输入社会统一信用代码" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="业务分类" prop="primaryIndustryCategory">
              <el-cascader @change="industryCategoryInfo" v-model="industry" clearable :options="industryList" :props="{label:'name',value:'code'}" style="width: 100%;"></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="经营地址" prop="province">
              <el-cascader @change="businessAddressInfo" v-model="province" clearable :options="cityList" :props="{label:'name',value:'code'}" style="width: 100%;"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="经营详情地址" label-width="130px" prop="address">
              <el-input v-model="form.address" :maxlength="100"  placeholder="请输入经营详细地址	" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">银行信息</el-divider>
        <el-form-item label="开户许可证" prop="openAccountLicenceImg">
          <YeePayFileUpload @input="handUploadImg" keys="openAccountLicenceUrl" :file-size="4" :path="form.openAccountLicenceUrl"  :limit="1" v-model="form.openAccountLicenceImg"></YeePayFileUpload>
        </el-form-item>
        <el-form-item label="结算类型" prop="bankAccountType">
          <el-select v-model="form.bankAccountType" placeholder="请选择结算类型" clearable style="width: 100%" >
            <el-option label="对公" value="ENTERPRISE_ACCOUNT"/>
            <el-option label="对私" value="DEBIT_CARD"/>
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="银行名称" prop="bankCode">
              <el-select filterable remote v-model="form.bankCode" clearable placeholder="请输入银行名称" :remote-method="remoteMethod" :loading="bankNameLoading" style="width: 100%;">
                <el-option v-for="item in bankList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="银行账户号码" prop="bankCardNo">
              <el-input v-model="form.bankCardNo" placeholder="请输入银行账户号码" />
            </el-form-item>
          </el-col>
        </el-row>


        <el-divider content-position="left">法人信息</el-divider>

        <el-row>
          <el-col :span="8">
            <el-form-item label="身份证件正面（人像面）" prop="legalLicenceFrontImg">
              <YeePayFileUpload @input="handUploadImg" keys="legalLicenceFrontUrl" :file-size="5"  :path="form.legalLicenceFrontUrl"  :limit="1" v-model="form.legalLicenceFrontImg"></YeePayFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证件反面（国徽面）" prop="legalLicenceBackImg">
              <YeePayFileUpload @input="handUploadImg" keys="legalLicenceBackUrl" :file-size="5"  :path="form.legalLicenceBackUrl"  :limit="1" v-model="form.legalLicenceBackImg"></YeePayFileUpload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="type === 1">
          <el-col :span="8">
            <el-form-item label="付款业务协议" prop="agreementPhotoImg">
              <YeePayFileUpload @input="handUploadImg" type="pdf" keys="agreementPhotoUrl" :path="form.agreementPhotoUrl" :fileType="['pdf']" :file-size="4"  :limit="1" v-model="form.agreementPhotoImg"></YeePayFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="付款业务系统" prop="systemScreenshotImg">
              <YeePayFileUpload @input="handUploadImg" keys="systemScreenshotUrl" :file-size="4" :path="form.systemScreenshotUrl"  :limit="1" v-model="form.systemScreenshotImg"></YeePayFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="代运营店铺协议" prop="pcPayUrl">
              <YeePayFileUpload @input="handUploadImg" type="pdf" keys="pcPayUrl" :file-size="4" :fileType="['pdf']" :path="form.pcPayUrl"  :limit="1" v-model="form.pcPayImg"></YeePayFileUpload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="法人姓名" prop="legalName">
              <el-input v-model="form.legalName" placeholder="请输入法人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人邮箱" prop="contactEmail">
              <el-input v-model="form.contactEmail" placeholder="请输入联系人邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人手机号" prop="contactMobile">
              <el-input v-model="form.contactMobile" placeholder="请输入联系人手机号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="法人证件号码" prop="legalLicenceNo">
          <el-input v-model="form.legalLicenceNo" placeholder="请输入法人证件号码" />
        </el-form-item>



        <template v-if="type === 2">
          <el-divider content-position="left">店铺信息</el-divider>
          <el-row>
            <el-col :span="8">
              <el-form-item label="店铺名称" prop="shortName">
                <name-input v-model="form.shortName" :maxlength="20" placeholder="请输入店铺名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="店铺类型" prop="channelType">
                <el-select v-model="form.channelType" placeholder="请选择店铺类型" clearable style="width: 100%" >
                  <el-option label="美团" value="MEITUAN"/>
                  <el-option label="抖音" value="DOUYIN"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="店铺地址" prop="shopProvince">
                <el-cascader @change="shopAddressInfo" v-model="shopProvince" clearable :options="cityList" :props="{label:'name',value:'code'}" style="width: 100%;"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="店铺详细地址" label-width="130px" prop="shopAddress">
                <el-input v-model="form.shopAddress" :maxlength="100"  placeholder="请输入店铺详细地址	" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider content-position="left">协议</el-divider>
          <el-form-item label="数据处理确认书" prop="merQual">
            <YeePayFileUpload :fileType="['zip']" @input="handUploadImg" type="file" keys="merQualUrl" :file-size="4" :path="form.merQualUrl"  :limit="1" v-model="form.merQual"></YeePayFileUpload>
          </el-form-item>
        </template>

      </el-form>
      <div class="footer-operation">
        <el-button @click="open = false">返回</el-button>
        <el-button :loading="loading" type="primary" v-if="form.status === 2 || form.status === 6 || form.status === 4" @click="submit">查看</el-button>
        <el-button :loading="loading" type="primary" v-if="form.bindStatus === 2 " @click="handleGetYopMerchantShopBind">查看</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { listShop } from '@/api/ecs/shop'
import YeePayFileUpload from '@/components/yeePayFileUpload/index.vue'
import { listYeePayIndustry } from '@/api/ecs/yeePayIndustry'
import { listYeePayCity } from '@/api/ecs/yeePayCity'
import { listYeePayBank } from '@/api/ecs/yeePayBank'
import {
  addYeePayWithholding,
  updateYeePayWithholding,
  queryYeePayWithholdingIncoming,
  getYeePayWithholding, getYopMerchantShopBind
} from '@/api/ecs/yeePayWithholding'
import { getUserProfile } from '@/api/system/user'
import { listAgent, getAgent } from '@/api/ecs/agent'

export default {
  name:"yeePayWithholdingOperate",
  components: { YeePayFileUpload },
  props:{
    opens:{
      type:Boolean,
      default:false
    },
    title:{
      type:String,
      default:"蓝海银行"
    },
    type:{
      type:Number,
      default:2
    },
    id:{
      type:Number,
    },
    agencyOperationsId:{

    }
  },
  data(){
    return{
      user:{},
      form:{
        id: null,
        platformId: null,
        agentId: null,
        childAgentId: null,
        agencyOperationsId: null,
        shopId: null,
        agentIds:null,
        type: null,
        requestId: null,
        businessRole: null,
        parentMerchantNo: null,
        subMerchantNo: null,
        signType: null,
        licenceNo: null,
        licenceUrl: null,
        licenceImg: null,
        signName: null,
        shortName: null,
        openAccountLicenceUrl: null,
        openAccountLicenceImg: null,
        handLicenceUrl: null,
        handLicenceImg: null,
        legalName: null,
        channelType:null,
        legalLicenceType: null,
        legalLicenceNo: null,
        legalLicenceFrontUrl: null,
        legalLicenceFrontImg: null,
        legalLicenceBackUrl: null,
        legalLicenceBackImg: null,
        contactName: null,
        contactLicenceNo: null,
        contactMobile: null,
        contactEmail: null,
        servicePhone: null,
        adminMobile: null,
        settlementDirection: null,
        bankAccountType: null,
        bankCardNo: null,
        bankCode: null,
        province: null,
        city: null,
        district: null,
        address: null,
        shopProvince:null,
        shopCity:null,
        shopDistrict:null,
        productCode: null,
        rateType: null,
        primaryIndustryCategory: null,
        secondaryIndustryCategory: null,
        industryQualificationUrl: null,
        industryQualificationImg: null,
        status: null,
        fail: null,
        agreementSignUrl: null,
        feeRate: 0.00,
        delFlag: null,
        createTime: null,
        updateTime: null,
        merQual:null,
        merQualUrl:null,
        agreementPhotoUrl: null,
        agreementPhotoImg: null,
        systemScreenshotUrl: null,
        systemScreenshotImg: null
      },
      open:false,
      industry:[],
      shopList:[],
      province:[],
      cityList:[],
      bankList:[],
      agentList:[],
      shopProvince:[],
      loading:false,
      industryList:[],
      isRefresh:false,
      agentLoading:false,
      bankNameLoading:false,
      rules: {
        shopId:[
          { required: true, message: "请选择店铺账户", trigger: "change" }
        ],
        agentIds:[
          { required: true, message: "请选择代理账户", trigger: "change" }
        ],
        productCode:[
          { required: true, message: "请选择产品", trigger: "change" }
        ],

        signType: [
          { required: true, message: "请选择商户类型", trigger: "change" }
        ],
        licenceNo: [
          { required: true, message: "社会统一信用代码不能为空", trigger: "blur" }
        ],
        licenceImg: [
          { required: true, message: "请上传营业执照", trigger: "blur" }
        ],
        signName: [
          { required: true, message: "公司全称", trigger: "blur" }
        ],
        shortName: [
          { required: true, message: "店铺名称不能为空", trigger: "blur" }
        ],
        openAccountLicenceImg: [
          { required: true, message: "请上传开户许可证",  trigger:['change',"blur"] }
        ],
        channelType: [
          { required: true, message: "请选择店铺类型",  trigger:['change',"blur"] }
        ],
        merQual: [
          { required: true, message: "请上传数据处理确认书",  trigger:['change',"blur"] }
        ],
        legalName: [
          { required: true, message: "法人姓名不能为空", trigger: "blur" }
        ],
        legalLicenceNo: [
          { required: true, message: "法人证件号码不能为空", trigger: "blur" },
          { pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[\dXx]$/, message: '法人身份号格式不正确', trigger: 'blur' }
        ],
        legalLicenceFrontImg: [
          { required: true, message: "请上传身份证正面", trigger: "blur" }
        ],
        legalLicenceBackImg: [
          { required: true, message: "请上传身份证反面", trigger: "blur" }
        ],
        contactMobile: [
          { required: true, message: "联系人手机号不能为空", trigger: "blur" },
          { pattern: /^1[3-9]\d{9}$/, message: '联系人手机号格式不正确', trigger: 'blur' }
        ],
        contactEmail: [
          { type:"email", message: "联系人邮箱格式错误", trigger: "blur" },
          { required: true, message: "联系人邮箱不能为空", trigger: "blur" }
        ],
        bankAccountType: [
          { required: true, message: "请选择结算类型", trigger: "change" }
        ],
        bankCardNo: [
          { required: true, message: "银行账户号码不能为空", trigger: "blur" }
        ],
        bankCode: [
          { required: true, message: "请选择银行", trigger: ["blur", "change"] }
        ],
        province: [
          { required: true, message: "请选择经营地址省市区", trigger: "change" }
        ],
        address: [
          { required: true, message: "经营详细地址不能为空", trigger: "blur" }
        ],
        primaryIndustryCategory: [
          { required: true, message: "请选择业务分类", trigger: "change" }
        ],
        systemScreenshotImg: [
          { required: true, message: "请上传付款业务系统", trigger: ["change", "blur"] }
        ],
        agreementPhotoImg: [
          { required: true, message: "请上传付款业务协议", trigger: ["change", "blur"] }
        ],
        shopAddress: [
          { required: true, message: "店铺详细位置不能为空", trigger: "blur" }
        ],
        shopProvince: [
          { required: true, message: "请选择店铺地址省市区", trigger: "change" }
        ],
      },
      statusOptions: [
        { value: 1, label: "待提交" },
        { value: 2, label: "审核中" },
        { value: 3, label: "审核驳回" },
        { value: 4, label: "协议待签署" },
        { value: 5, label: "申请完成" },
        { value: 6, label: "业务开通中" },
      ],
    }
  },
  created() {
    listShop({ page: 1, pageSize: 1000000 }).then(res => {
      this.shopList = res.rows
    })
    listYeePayIndustry().then(response => {
      this.industryList = this.handleTree(response.data, "code", "parentCode");
    })
    listYeePayCity().then(response => {
      this.cityList = this.handleTree(response.data, "code", "parentCode");
    })
  },
  methods: {
    industryCategoryInfo(val) {
      this.form.primaryIndustryCategory = val[0]
      this.form.secondaryIndustryCategory = val[1]
    },
    handUploadImg(val1, val2, val3) {
      this.form[val2] = val3
    },
    businessAddressInfo(val) {
      this.form.province = val[0]
      this.form.city = val[1]
      this.form.district = val[2]
    },
    shopAddressInfo(val) {
      this.form.shopProvince = val[0]
      this.form.shopCity = val[1]
      this.form.shopDistrict = val[2]
    },
    agentRemoteMethod(query) {
      if (query !== '' && query !== null) {
        this.agentLoading = true
        listAgent({ userNickName: query }).then(response => {
          this.agentList = response.data;
          this.agentLoading = false;
        }).catch(() => {
          this.agentLoading = false
        })
      }
    },
    remoteMethod(query) {
      if (query !== '' && query !== null) {
        this.bankNameLoading = true
        listYeePayBank({ name: query }).then(response => {
          this.bankList = response.data
          this.bankNameLoading = false
        }).catch(() => {
          this.bankNameLoading = false
        })
      }
    },

    submitForm() {
      if (this.form.id != null) {
        updateYeePayWithholding(this.form).then(response => {
          this.$modal.msgSuccess("保存成功");
          this.open = false;
          this.isRefresh = true
          this.loading = false
        });
      } else {
        addYeePayWithholding(this.form).then(response => {
          this.$modal.msgSuccess("保存成功");
          this.open = false;
          this.isRefresh = true
          this.loading = false
        });
      }
    },
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true
          queryYeePayWithholdingIncoming({requestId:this.form.requestId,subMerchantNo:this.form.subMerchantNo,id:this.form.id,status:this.form.status,type:this.form.type}).then(response => {
            this.$modal.msgSuccess("查询成功");
            this.open = false;
            this.loading = false
            this.isRefresh = true
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    handleGetYopMerchantShopBind(){
      this.loading = true
      getYopMerchantShopBind(this.form).then( res =>{
        this.loading = false
        if(res.data.bindStatus === 2){
          this.$message.info("绑定中")
        }else if(res.data.bindStatus === 3){
          this.isRefresh = true
          this.$message.success("绑定成功")
        }else if(res.data.bindStatus === 4){
          this.isRefresh = true
          this.$message.error("绑定失败")
        }
      }).catch(() => {
        this.isRefresh = true
        this.loading = false
      })
    },
    operateClose() {
      this.$emit("handOperateVisible", false, {})
    },

  },
  watch: {
    opens: {
      handler(val) {
        this.open = val
        this.form.type = this.type
        if (this.type === 2) {
          getUserProfile().then(response => {
            this.user = response.data;
          });
        }
      },
      immediate: true,
    },
    id: {
      handler(val) {
        if (val) {
          this.loading = true

          getYeePayWithholding(val).then(response => {
            if (response.data) {
              let data = response.data;
              this.industry = [data.primaryIndustryCategory, data.secondaryIndustryCategory]
              this.province = [data.province, data.city, data.district]
              this.shopProvince = [data.shopProvince, data.shopCity, data.shopDistrict]
              if (data.type === 1) {
                if (data.childAgentId != null) {
                  data.agentIds = data.childAgentId
                  getAgent(data.agentIds).then(agentResponse => {
                    this.loading = false
                    this.agentList = [agentResponse.data];
                  }).catch(() => {
                    this.loading = false
                  })
                } else {
                  data.agentIds = data.agentId
                  getAgent(data.agentId).then(agentResponse => {
                    this.loading = false
                    this.agentList = [agentResponse.data];
                  }).catch(() => {
                    this.loading = false
                  })
                }
              } else {
                this.loading = false
              }
              this.form = data
              console.log(this.form)
            }
          }).catch(() => {
            this.loading = false
          });
        }
      },
      immediate: true,
    }
  }

}

</script>
<style scoped lang="scss">
.form {
  padding-bottom: 80px;
}

.footer-operation {
  bottom: 0;
  width: 100%;
  height: 80px;
  display: flex;
  z-index: 10000;
  padding: 0 20px;
  text-align: center;
  position: absolute;
  align-items: center;
  background-color: #ffffff;
  border-top: 1px solid #EBEEF5;

  .el-button {
    width: 100%;
  }
}
</style>
